import * as React from "react"
import '../css/styles.css'
const { useState } = React

const pageStyles = {
  color: "#232129",
  padding: 36,
  fontFamily: "-apple-system, Roboto, sans-serif, serif",
  display: 'flex',
  justifyContent: 'center',
  flexDirection: 'column',
  alignItems: 'center'
}

const inputWrapper = {
  width: '561px',
  position: 'relative',
  height: '44px',
  marginBottom: '30px'
}

const logoStyle = {
  backgroundImage: 'url(https://zhanstatic.vivo.com.cn/wukong-zhan/img/0d88085d-b1db-40b7-a413-05e51522002dnwebp_compress.png)',
  forcedColorAdjust: 'none',
  height: '92px',
  width: '272px',
  marginBottom: '30px'
}

const inputStyle = {
  border: 'none',
  borderRadius: `${0.5*44}px`,
  color: '#000000ff',
  width: '100%',
  paddingInlineStart: '52px',
  boxShadow: 'rgba(32, 33, 36, 0.28) 0px 1px 6px 0px',
  outline: 0,
  height: '100%'
}

const iconButtonStyle = {
  backgroundImage: 'url(https://zhanstatic.vivo.com.cn/wukong-zhan/img/2d7ec00d-395b-447b-a618-548caaaa8d9enwebp_compress.png)',
  backgroundColor: 'transparent',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '21px 21px',
  border: 'none',
  pointerEvents: 'auto',
  position: 'absolute',
  right: '16px',
  width: '26px',
  height: '100%'
}

const maskStyle = {
  backgroundImage: 'url(https://zhanstatic.vivo.com.cn/wukong-zhan/img/71f74a5d-1a64-41d1-bff2-d164cbb82d3anwebp_compress.png)',
    WebkitMaskPosition: 'center',
    WebkitMaskRepeat: 'no-repeat',
    WebkitMaskSize: '16px',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '24px',
    height: '24px',
    width: '24px',
    left: '12px',
    position: 'absolute',
    top: '12px',
}

let links = [
  {
    title: "Projects · Dashboard · GitLab",
    icon: 'https://gitlab.vmic.xyz/assets/favicon-7901bd695fb93edb07975966062049829afb56cf11511236e61bcf425070e36e.png',
    url: "https://gitlab.vmic.xyz",
  },
  {
    title: "CSDN - 专业开发者社区",
    icon: 'https://g.csdnimg.cn/static/logo/favicon32.ico',
    url: "https://www.csdn.net",
  },
  {
    title: "概述",
    icon: 'https://doc.quickapp.cn/gitbook/images/favicon.ico',
    url: "https://doc.quickapp.cn",
  },
  {
    title: "npm",
    // icon: 'chrome://favicon2/?size=24&scaleFactor=1x&showFallbackMonogram=&pageUrl=https%3A%2F%2Fnpmjs.com%2F',
    icon: 'https://static.npmjs.com/58a19602036db1daee0d7863c94673a4.png',
    url: "https://www.npmjs.com/",
  },
  {
    title: "拉勾教育 - 拉勾旗下教育平台",
    icon: 'https://s0.lgstatic.com/mds-icon-fed/kaiwu/logo@2x.png',
    url: "https://kaiwu.lagou.com/",
  },
  {
    title: "GitHub",
    icon: 'https://github.com/fluidicon.png',
    url: "https://github.com",
  },
  {
    title: "稀土掘金",
    icon: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web//static/favicons/apple-touch-icon.png',
    url: "https://juejin.cn",
  },
  {
    title: "Stack Overflow - Where Developers Learn, Share, &amp; Build Careers",
    icon: 'https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196',
    url: "https://stackoverflow.com",
  },
  {
    title: "123_百度搜索",
    icon: 'https://www.baidu.com/favicon.ico',
    url: "https://www.baidu.com",
  },
  // {
  //   title: "123 - Google 搜索",
  //   icon: 'https://www.google.com.hk/images/branding/googleg/1x/googleg_standard_color_128dp.png',
  //   url: "https://www.google.com.hk",
  // },
]

const inputRef0 = React.createRef();
const inputRef = React.createRef();
const inputRef2 = React.createRef();



function isUrl (url) {
  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url)
}


const IndexPage = () => {
  const [isShow, setIsShow] = useState(false)
  const [isAddShow, setIsAddShow] = useState(links.length<10?true:false)
  const [linkList, setLinkList] = useState(links)
  const handleKeyPress = (event) => {
    if (event.key === 'Enter' && inputRef0.current.value) {
      window.open('https://www.google.com.hk/search?q=' + inputRef0.current.value, '_blank')
    }
  }
  const handleCancel = () => {
    console.log('handleCancel')
    setIsShow(false)
  }
  const handleFinal = () => {
    if(!inputRef.current.value) return alert('名称不能为空')
    if(!isUrl(inputRef2.current.value)) return alert('url网址不合法')
    const icon = 'https://zhanstatic.vivo.com.cn/wukong-zhan/img/c2e3266b-c20e-44c7-b265-976c64f92f3bnwebp_compress.png'
    console.log(inputRef.current.value, inputRef2.current.value)
    links.push({
      title: inputRef.current.value.trim(),
      icon,
      url: inputRef2.current.value,
    })
    if(links.length>=10) {
      setIsShow(false)
    }
    console.log('handleFinal', links)
    setLinkList(linkList)
  }
  const openDialog = () => {
    setIsShow(true)
  }

  return (
    <main style={pageStyles}>
      <div id="logo" style={logoStyle}></div>
      <div id="inputWrapper" style={inputWrapper}>
        <input id="input" type="search" ref={inputRef0} style={inputStyle} onKeyPress={handleKeyPress} placeholder="在 Google 中搜索，或输入网址" aria-expanded="false" aria-live="polite" />
        <div id="icon" style={maskStyle}></div>
        <button id="voiceSearchButton" style={iconButtonStyle} title="语音搜索"></button>
      </div>
      <div id="container" >
      {linkList.map(link => (
        <a className="tile" key={link.url} title="Projects · Dashboard · GitLab" href={link.url}>
          {/* <cr-icon-button id="actionMenuButton" class="icon-more-vert" tabindex="0" title="更多操作" aria-disabled="false" role="button"></cr-icon-button>
          <cr-icon-button id="removeButton" class="icon-clear" tabindex="0" hidden="" title="移除" aria-disabled="false" role="button"></cr-icon-button> */}
          <div className="tile-icon">
            <img src={link.icon} />
          </div>
          <div className="tile-title title-ltr">{link.title}</div>
        </a>
        ))}
        {
          isAddShow && 
        <div id="addShortcut" onClick={openDialog}
           ><div
          className="tile-icon"><div id="addShortcutIcon" ></div></div><div
          className="tile-title"><span>添加快捷方式</span></div>
          </div>
        }
        </div>
      {/* 添加快捷方式 */}
      {isShow && <div className="dialog-container">
        <div className="dialog">
          <div className="dialog-title">添加快捷方式</div>
          <div className="dialog-body">
            <div id="label" className="cr-form-field-label">
              名称
            </div>
            <div className="inner-input-container">
              <input className="input" ref={inputRef}></input>
            </div>
            <div className="error" ></div>
            <div id="label" className="cr-form-field-label">
              网址
            </div>
            <div className="inner-input-container">
              <input className="input" ref={inputRef2}></input>
            </div>
          </div>
          <div className="button-container">
            <button className="cancel-button" onClick={handleCancel} >
              取消
            </button>
            <button className="action-button" onClick={handleFinal} >
              完成
            </button>
          </div>
        </div>
      </div>}
    </main>
  )
}

export default IndexPage

export const Head = () => <title>Home Page</title>
